#{extends 'main.html' /}
#{set title:'Register' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/ui-lightness-20/jquery-ui-1.8.20.custom.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.tagedit.css'}">
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery-ui-1.8.20.custom.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.autoGrowInput.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/user.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.tagedit.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}
<div id="content" class="about-me authentication">
#{if user.id}
<h3>Edit Profile</h3>
#{/if}
#{else}
<h3>Register</h3>
#{/else}
<form class="registration taggable" action="@{Users.save()}" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="user.id" value="${user.id}" />
    <ul class="long_login">
	    <li>
		    <label>Full Name</label>
		    <input class="name" type="text" name="user.fullname" value="${user.fullname}" rel="tooltip" data-original-title="Name is required!" />
		    <span class="error">#{error 'user.fullname' /}</span>
	    </li>
	    <li>
		    <label>Email</label>
		    <input type="text" name="user.email" value="${user.email}" class="email" rel="tooltip" data-original-title="Email is required!" />
		    <span class="error">#{error 'user.email' /}</span>
	    </li>
	    <li>
		    <label>Password</label>
		    <input type="password" name="user.password" value="${user.password}" rel="tooltip" data-original-title="Password is required!" />
		    <span class="error">#{error 'user.password' /}</span>
	    </li>
	    <li>
		    <label>Photo</label>
		    <input type="file" name="user.photo" />
	    </li>
	    <li>
	        <label>Interests</label>
	        #{list items:user.interests, as:'interest'}
	        <input class="tags" style="width:200px;" type="text" name="interests[${interest.id}]" value="${interest.name}" required="required" rel="tooltip" title="This field is required. You'll have tag suggestions. You can select the one you want from the list. Custom tags are not allowed. Also, you should seperate tags with comma (,)." data-placement="right" />
	        #{/list}
	    </li>
    </ul>
    <button type="submit" class="btn btn-primary" name="submit">Register</button>
  </form>
  
 <!--<iframe src="https://www.facebook.com/plugins/registration?
             client_id=314694018611615&
             redirect_uri=http://dev.fatihbingo.com:9000/&
             fields=name,birthday,gender,location,email"
             
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="330">
</iframe>  -->
  
</div>
